<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影像对比</title>

  <link rel="stylesheet" href="http://taxation-qdgray.cindata.cn/arcgis_js_api_314/library/3.14/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://taxation-qdgray.cindata.cn/arcgis_js_api_314/library/3.14/3.14/esri/css/esri.css"/>

  <script src="http://taxation-qdgray.cindata.cn/arcgis_js_api_314/library/3.14/3.14/init.js"></script>

  <script src="js/jquery-1.7.2.js"></script>
  <script src="js/mapConfig.js"></script>
  <script src="objClass/objQuery.js"></script>
  <script src="objClass/objFunction.js"></script>
  <script src="objClass/objGeoStyle.js"></script>
  <script src="objClass/objBubble.js"></script>
  <script src="objClass/objGeometry.js"></script>
  <script src="objClass/objInfowindow.js"></script>
  <script src="js/mapThemePopo.js"></script>
  <script src="js/mapPublicFunction.js"></script>
  <script src="js/mapShowLocation.js"></script>

  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font-family: Arial;
    }
    .twoscreen1{
      float: left;
      height: 100%;
      width: 50%;
    }
    .twoscreen2{
      float: left;
      height: 50%;
      width: 100%;
    }
    .threescreen-div1 {
      float: left;
      height: 100%;
      width: 50%;
    }
    .threescreen-div2 {
      float: right;
      height: 50%;
      width: 50%;
    }
    .threescreen-div3 {
      float: right;
      height: 50%;
      width: 50%;
    }

    .threescreen-div4 {
      float: left;
      height: 50%;
      width: 50%;
    }
    .threescreen-div5 {
      float: right;
      height: 50%;
      width: 50%;
    }
    .threescreen-div6 {
      float: right;
      height: 50%;
      width: 100%;
    }
    .fourscreen{
      float: left;
      height: 50%;
      width: 50%;
    }

    .map {
      position: relative;
      width: 100%;
      height: 100%;
    }

  </style>
  <script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.toolbars.draw");
    dojo.require("esri.tasks.query");
    dojo.require("dojo.parser");
    dojo.require("esri.Color");
    dojo.require("esri.symbols.Font");
    dojo.require("esri.symbols.TextSymbol");
    dojo.require("esri.tasks.geometry");
    dojo.require("esri.symbols.SimpleFillSymbol");
    dojo.require("esri.layers.ArcGISTiledMapServiceLayer");


    window.onresize = function(){
      document.getElementById("map").style.height = document.documentElement.clientHeight;
      document.getElementById("map").style.width = document.documentElement.clientWidth/2;
      document.getElementById("map2").style.height = document.documentElement.clientHeight;
      document.getElementById("map2").style.width = document.documentElement.clientWidth/2;

    }

    var mapObj;
    var mapObj2;
    var mapObj3;
    var mapObj4;
    var imgLayer2015;
    var imgLayer2016;
    var imgLayer2017;
    var imgLayer2018;
    var divStyle = 41;
    var extent;
    var graphicLayer,graphicLayer2;
    var zoomEnd1 = false;
    var zoomEnd2 = false;
    var zoomEnd3 = false;
    var zoomEnd4 = false;

    function initMap(){
      map = new esri.Map(
        'map1'
        ,{
          logo:false
          ,slider:true
          ,sliderStyle : "small"
        });
      imgLayer2015 = new esri.layers.ArcGISTiledMapServiceLayer("http://gissvc4an.cindata.cn/arcgis/rest/services/comm/google2015/MapServer",{id:'2015'});
      imgLayer2016 = new esri.layers.ArcGISTiledMapServiceLayer("http://gissvc4an.cindata.cn/arcgis/rest/services/comm/google2016/MapServer",{id:'2016'});
      imgLayer2017 = new esri.layers.ArcGISTiledMapServiceLayer("http://gissvc4an.cindata.cn/arcgis/rest/services/comm/google2017/MapServer",{id:'2017'});
      imgLayer2018 = new esri.layers.ArcGISTiledMapServiceLayer("http://gissvc4an.cindata.cn/arcgis/rest/services/comm/googleMap/MapServer",{id:'2018'});

      map.addLayer(imgLayer2018);

      extent = new esri.geometry.Extent({
        "xmin": config.xmin_DL, "ymin": config.ymin_DL, "xmax": config.xmax_DL,
        "ymax": config.ymax_DL, "spatialReference": {
          "wkid": config.wkid
        }
      });
      map.setExtent(extent);

      //加载其他div数据
      mapObj2 = new esri.Map(
        'map2'
        ,{
          logo:false
          ,slider:true
          ,sliderStyle : "small"
        });
      mapObj2.addLayer(imgLayer2015);
      mapObj2.setExtent(map.extent);

      //map3
      mapObj3 = new esri.Map(
        'map3'
        ,{
          logo:false
          ,slider:true
          ,sliderStyle : "small"
        });
      mapObj3.addLayer(imgLayer2016);
      mapObj3.setExtent(map.extent);

      //map4
      mapObj4 = new esri.Map(
        'map4'
        ,{
          logo:false
          ,slider:true
          ,sliderStyle : "small"
        });
      mapObj4.addLayer(imgLayer2017);
      mapObj4.setExtent(map.extent);

      addTempLayer();
      // 绑定地图事件
      BindEvent();
    }

    function addTempLayer() {
      graphicLayer = new esri.layers.GraphicsLayer();
      map.addLayer(graphicLayer);
      graphicLayer2 = new esri.layers.GraphicsLayer();
      mapObj2.addLayer(graphicLayer2);
      //mapObj2.addLayer(graphicLayer);mapObj3.addLayer(graphicLayer);mapObj4.addLayer(graphicLayer);
    }

    function BindEvent() {
      map.on("mouse-up",function(){
        console.log("鼠标1");
        mapObj2.setExtent(map.extent);
        mapObj3.setExtent(map.extent);
        mapObj4.setExtent(map.extent);
      });
      map.on("zoom-end",function(){
        console.log("缩放1");
        mapObj2.setExtent(map.extent);
        mapObj3.setExtent(map.extent);
        mapObj4.setExtent(map.extent);
      });

      mapObj2.on("mouse-up",function(){
        console.log("鼠标2");
        map.setExtent(this.extent);
        mapObj3.setExtent(this.extent);
        mapObj4.setExtent(this.extent);
      });
      mapObj2.on("zoom-end",function(){
        console.log("缩放2");
        map.setExtent(this.extent);
        mapObj3.setExtent(this.extent);
        mapObj4.setExtent(this.extent);
      });

      /*mapObj3.on("mouse-up",function(){
        map.setExtent(this.extent);
        mapObj2.setExtent(this.extent);
        mapObj4.setExtent(this.extent);
      });
      mapObj3.on("zoom-end",function(){
        map.setExtent(this.extent);
        mapObj2.setExtent(this.extent);
        mapObj4.setExtent(this.extent);
      });

      mapObj4.on("mouse-up",function(){
        map.setExtent(this.extent);
        mapObj2.setExtent(this.extent);
        mapObj3.setExtent(this.extent);
      });
      mapObj4.on("zoom-end",function(){
        map.setExtent(this.extent);
        mapObj2.setExtent(this.extent);
        mapObj3.setExtent(this.extent);
      });*/

      map.on("load",function(){
        //queryLDSpatialInfo('999009');
      });
    }

    //根据楼栋id查询楼栋空间信息
    function queryLDSpatialInfo(buildId){
      graphicLayer.clear();
      graphicLayer2.clear();
      var SQL = " 1=1 and BUILD_ID = '"+buildId+"'";
      QueryBySQL(config.urlIndoor+config.urlIndoor_build,SQL,(function(res){
        if(res.features.length < 1){
            alert("该楼栋无位置信息");
        }
        for(var i=0;i<res.features.length;i++) {
          var graphic = res.features[i];
          var geo = graphic.geometry.getExtent().getCenter();
          map.centerAndZoom(geo,18);
          //添加楼栋标签
          var label = res.features[i].attributes.BUILD_NAME;
          if(label){
            var src = "img/point_2.png";
            addPopo(graphicLayer, geo.x, geo.y, src, 20, 20, graphic.attributes, label, "9pt", 10, 5, 0);
            addPopo(graphicLayer2, geo.x, geo.y, src, 20, 20, graphic.attributes, label, "9pt", 10, 5, 0);

            mapObj2.centerAt(geo);
          }
        }
      }),(function(){console.log("查询楼栋失败...")}),null);
    }

    function showMap(divStyle,imgLayers){
      //切换样式
      console.log(divStyle);
      if(divStyle == 21){
        $("#mapDiv1").attr("class","twoscreen1");
        $("#mapDiv2").attr("class","twoscreen1");
        $("#mapDiv3").attr("class","").css('display','none');
        $("#mapDiv4").attr("class","").css('display','none');
      }else if(divStyle == 22){
        $("#mapDiv1").attr("class","twoscreen2");
        $("#mapDiv2").attr("class","twoscreen2");
        $("#mapDiv3").attr("class","").css('display','none');
        $("#mapDiv4").attr("class","").css('display','none');
      }else if(divStyle == 31){
        $("#mapDiv1").attr("class","threescreen-div1");
        $("#mapDiv2").attr("class","threescreen-div2");
        $("#mapDiv3").attr("class","threescreen-div3").css('display','block');
        $("#mapDiv4").attr("class","").css('display','none');
      }else if(divStyle == 32){
        $("#mapDiv1").attr("class","threescreen-div4");
        $("#mapDiv2").attr("class","threescreen-div5");
        $("#mapDiv3").attr("class","threescreen-div6").css('display','block');
        $("#mapDiv4").attr("class","").css('display','none');
      }else if(divStyle == 41){
        $("#mapDiv1").attr("class","fourscreen");
        $("#mapDiv2").attr("class","fourscreen");
        $("#mapDiv3").attr("class","fourscreen").css('display','block');
        $("#mapDiv4").attr("class","fourscreen").css('display','block');
      }
      /*
       //切换图层
       if(imgLayers.length > 0){
       for(var i=0;i<imgLayers.length;i++){

       var layerIndex = imgLayers[i];

       if(i == 0){
       if(layerIndex == 1){
       initAllMap(imgLayer2015,1);

       }else if(layerIndex == 2){
       initAllMap(imgLayer2016,1);
       }else if(layerIndex == 3){
       initAllMap(imgLayer2017,1);
       }
       }else if(i == 1){
       if(layerIndex == 1){
       initAllMap(imgLayer2015,2);

       }else if(layerIndex == 2){
       initAllMap(imgLayer2016,2);
       }else if(layerIndex == 3){
       initAllMap(imgLayer2017,2);
       }
       }else if(i == 2){
       //changeBasemap(mapObj3,layerIndex);
       }
       }
       }
       */
    }



    /*setTimeout(function () {   // 延迟1秒，保证数据的一致性

    }, 1000);*/
  </script>
  <script type="text/javascript">
    function bindEvent(element, eventName, eventHandler) {
      if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, eventHandler);
      }
    }

    bindEvent(window, 'message', function (e) {
        if(e && e.data){
            var obj = JSON.parse(e.data);
            if(obj["type"] == "buildingId" && obj["buildingId"] != null){
              queryLDSpatialInfo(obj["buildingId"]);
            }else{
                console.log("接口参数不正确...");
            }

        }
    });

    //向父级发送消息
    var sendMessage = function (msg) {
      window.parent.postMessage(msg, '*');
    };
  </script>
</head>
<body class="tundra" onload="initMap()">

<div class="screen">
  <div id="mapDiv1" class="twoscreen1">
    <div id="map1" class="map"></div>
  </div>

  <div id="mapDiv2" class="twoscreen1">
    <div id="map2" class="map"></div>
  </div>

  <div id="mapDiv3" class="" style="display: none;">
    <div id="map3" class="map"></div>
  </div>

  <div id="mapDiv4" class="" style="display: none;">
    <div id="map4" class="map"></div>
  </div>
</div>
</body>
<script>
  $(function(){
    $(".screen").width($(window).width())
    $(".screen").height($(window).height())
    $(window).resize(function() {
      $(".screen").width($(window).width())
      $(".screen").height($(window).height())
    });
  })
</script>
</html>
